<template>
  <div class="login">
    <el-form :model="loginForm" :rules="loginRules">
      <el-form-item prop="mobile">
        <el-input v-model="loginForm.mobile" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input v-model="loginForm.passWord" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item prop="checkPassWord">
        <el-input v-model="loginForm.checkPassWord" placeholder="请输入密码" />
      </el-form-item>
    </el-form>
    <button />
  </div>
</template>
<script>
// import { validatePassword } from '@/utils/validate'
export default {
  data() {
    const validatePassword = (rules, val, callback) => {
      const isVaild = val === this.loginForm.passWord
      if (!isVaild) {
        callback(new Error('两次密码必须一致'))
      } else {
        callback()
      }
    }

    return {
      loginForm: {
        mobile: '15112164087',
        passWord: '',
        checkPassWord: ''
      },
      loginRules: {
        mobile: [
          { required: true, trigger: 'blur', message: '号码不能为空' },
          { min: 11, max: 11, trigger: 'blur', message: '号码需11位' }

        ],
        passWord: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 6, max: 11, trigger: 'blur', message: '用户名最少6位,最多11位' }

        ],
        checkPassWord: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      loading: false
    }
  }
}
</script>
<style lang="">

</style>
